<template>
    <div class="the-menu">
        <div class="menu-title">
            <router-link to="/welcome">
                <img src="./tomato.png" width="30" height="30"><span>吃了吗点餐管理系统</span>
            </router-link>
        </div>
        <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                text-color="#fff"
                unique-opened
                router
                collapse-transition
                active-text-color="#BAE8DF"
                @open="handleOpen"
                @close="handleClose">
            <el-menu-item v-for="(menu,index) in menus" :index="menu.index" :key="index">
                <i :class="menu.icon"></i>
                <span slot="title">{{menu.title}}</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        data() {
            return {
                menus: [
                    // {
                    //     title: "用户管理", index: "user-management", icon: "el-icon-user-solid"
                    // },
                    {
                        title: "桌号生成", index: "table-management", icon: "el-icon-edit"
                    },
                    {
                        title: "商店信息", index: "store-management", icon: "el-icon-platform-eleme"
                    },
                    {
                        title: "订单管理", index: "order-management", icon: "el-icon-s-claim"
                    },
                    {
                        title: "类目管理", index: "category-management", icon: "el-icon-tickets"
                    },
                    {
                        title: "商品管理", index: "product-management", icon: "el-icon-shopping-cart-full"
                    },
                ]
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                // eslint-disable-next-line no-console
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                // eslint-disable-next-line no-console
                console.log(key, keyPath);
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .the-menu {
        .menu-title {
            height 60px
            line-height 60px
            text-align center
            font-size 20px
            color white
            border-bottom 1px solid #B6CAE7

            a {
                padding 10px

                img {
                    width 30px
                    height 30px
                    vertical-align text-bottom
                    padding-right 10px
                }

                span {
                    font-size 20px
                }
            }
        }
    }
</style>
